import { Form, Input, Modal } from 'antd';
import React from 'react';
import type { PermissionItem, UpdatePermissionBean } from '../data';

interface AuthPermissionUpdateFormProps {
  permission: PermissionItem;
  onSubmit: (values: UpdatePermissionBean) => Promise<void>;
  onCancel: (flag?: boolean) => void;
  modalVisible: boolean;
}

const AuthPermissionAddForm: React.FC<AuthPermissionUpdateFormProps> = (props) => {
  const [form] = Form.useForm();

  const {
    onSubmit: handleUpdate,
    onCancel: handleUpdateModalVisible,
    modalVisible: updateModalVisible,
    permission,
  } = props;

  const onModalOk = async () => {
    const fieldsValue = (await form.validateFields()) as UpdatePermissionBean;
    handleUpdate(fieldsValue);
  };

  return (
    <Modal
      title="编辑权限"
      open={updateModalVisible}
      destroyOnClose
      onOk={() => onModalOk()}
      onCancel={() => handleUpdateModalVisible(false)}
      afterClose={() => handleUpdateModalVisible(false)}
      okText="确定"
      cancelText="取消"
      style={{ marginTop: 150 }}
    >
      <Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }} form={form}>
        <Form.Item
          name="id"
          label="权限描述"
          initialValue={permission.id}
          hidden={true}>
        </Form.Item>

        <Form.Item
          rules={[{ required: true, message: '必填' }]}
          name="desc"
          label="权限描述"
          initialValue={permission.name}>

          <Input />

        </Form.Item>

      </Form>
    </Modal>
  );
};
export default AuthPermissionAddForm;
